<template>
    <div id="role-update" class="container-self">
        <div class="operate">
            <div v-if="is_admin == 1">
            <transition name="slide-fade" mode="out-in">
                <div v-if="disabled">
                    <a-button type="primary" @click="resetForm">返回原值</a-button>
                    <a-button type="primary" @click="submitForm('form')">保存</a-button>
                </div>
                <a-button type="primary" @click="disabled = true" v-if="!disabled">修改</a-button>
            </transition>
            </div>
        </div>

        <div class="detail-container">
            <div class="checkbox" :class="{'half': checkHalfAll}">
                <input type="checkbox" class="minimal" id="all-pages-auth" v-model="checked" @click="checkChange">
                <label for="all-pages-auth" v-if="disabled"></label>
                <label for="all-pages-auth" @click.prevent v-else></label>
                <span>所有页面权限</span>
            </div>
            <div v-for="val in menus">
                <p class="subheading">{{val.name}}</p>
                <div class="subheading-detail">
                    <div class="checkbox">
                        <input type="checkbox" class="minimal" v-model="checkedAuth" :value=val.id :id="val.id">
                        <label :for=val.id v-if="disabled"></label>
                        <label :for=val.id @click.prevent v-else></label>
                        <span>{{val.name}}</span>
                    </div>
                </div>
                <div v-if="val.children" class="flex-box">
                    <div v-for="v in val.children" class="first-level">
                        <div class="subheading-detail">
                            <div class="checkbox">
                                <input type="checkbox" class="minimal" v-model="checkedAuth" :value=v.id :id="v.id">
                                <label :for=v.id v-if="disabled"></label>
                                <label :for=v.id @click.prevent v-else></label>
                                <span>{{v.name}}</span>
                            </div>
                        </div>
                        <div v-if="v.children" class="operate-level">
                            <div v-for="item in v.children">
                                <div class="subheading-detail">
                                    <div class="checkbox">
                                        <input type="checkbox" class="minimal" v-model="checkedAuth" :value=item.id
                                               :id="item.id">
                                        <label :for=item.id v-if="disabled"></label>
                                        <label :for=item.id @click.prevent v-else></label>
                                        <span>{{item.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: 0,
                menus: [],
                initialArr: [],
                allMenus: [],
                checkedAuth: [],
                checked: false,
                disabled: false,
            }
        },

        computed: {
            checkHalfAll() {
                return this.checkedAuth.length > 0 && this.checkedAuth.length < this.allMenus.length
            },
        },

        watch: {
            'checkedAuth': {
                handler: function (val) {
                    this.checked = val.length === this.allMenus.length;
                },
                deep: true
            }
        },

        methods: {
            submitForm() {
                let auth = Array.from(this.checkedAuth).filter(item => item !== '');
                this.postData({'menu_ids': auth}).then(res => {
                    if (res.id) {
                        this.initialArr = auth;
                        this.$message.success(res.msg, 1);
                        this.disabled = false;
                    } else {
                        this.$message.error(res.msg, 1);
                    }
                })
            },
            checkChange() {
                if (this.checked) {
                    this.checkedAuth = [];
                } else {
                    this.checkedAuth = [];

                    this.allMenus.forEach(item => {
                        this.checkedAuth.push(item);
                    });
                }
            },
            flatten(data) {
                return data.reduce((arr, {id, name, children = []}) =>
                    arr.concat({id}, this.flatten(children)), [])
            },
            getMenuIds(data) {
                let depsObj = this.flatten(data);

                let arr = [];
                depsObj.map(item => {
                    arr.push(item.id)
                });
                return arr;
            },
            resetForm() {
                this.checkedAuth = this.initialArr
            },
            async postData(param) {
                return await this.http('put', 'role/update?id=' + this.id, param);
            },
            async getDetail(id) {
                let res = await this.http('get', 'role/view', {id: id});
                if (res.menu_ids) {
                    setTimeout(() => {
                        this.initialArr = this.checkedAuth = res.menu_ids.filter(item => item !== '');
                    }, 200)
                }
            },
        },
        async mounted() {
            this.id = this.$route.params.id;
            await this.http('get', 'menu/list', {type: 'role'}).then(res => {
                this.menus = res;
                this.allMenus = this.getMenuIds(this.menus);
            });
            await this.getDetail(this.id);
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    #role-update {
        & > .operate {
            @include fj(flex-end);
            margin-bottom: 20px;

            .ant-btn + .ant-btn {
                margin-left: 30px;
            }
        }
    }

    .container-self {
        #authDelegateForm {
            padding: 20px 70px;
        }

        .operate-container {
            margin-bottom: 25px;
        }

        .detail-container {
            webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 30px 40px;
            border: 1px solid #000;

            .flex-box {
                width: 100%;

                & > .first-level {
                    @include fj(flex-start);

                    & > .subheading-detail {
                        width: 200px;
                    }

                    & > .operate-level {
                        flex: 1;
                        @include fj(flex-start);

                        & > div {
                            width: 200px;
                        }
                    }
                }
            }

            .checkbox > span {
                font-weight: bold;
            }

            .subheading {
                font-size: 14px;
                margin-top: 30px;
                font-weight: bold;
            }

            .subheading-detail {
                margin-top: 30px;
                margin-left: 30px;

                .view {
                    margin-left: 100px;
                }

                p {
                    width: 140px;
                }

                .sub-subheading-detail {
                    margin-left: 50px;
                    @include wh(160px, 50px);
                }
            }

            .subheading-detail:last-child {
                margin-bottom: 10px;
            }
        }
    }

    .half {
        label:before {
            @include borderRadius(2px);
            display: block;
            content: "\2714";
            text-align: center;
            @include sc(16px, #C8D0E9);
            height: 20px;
            background: $blue;
            filter: grayscale(0.7);
        }
    }

    .checkbox {
        position: relative;

        .minimal {
            visibility: hidden;
            width: 20px;

            & + label {
                @include borderRadius(2px);
                position: absolute;
                top: 0;
                display: block;
                cursor: pointer;
                background: #3C4B5C;
                @include wh(20px, 20px);
            }

            &:checked + label:before {
                @include borderRadius(2px);
                display: block;
                content: "\2714";
                text-align: center;
                @include sc(16px, #C8D0E9);
                height: 20px;
                background: $blue;
            }
        }

        & > span {
            @include sc(14px, #C8D0E9);
            position: absolute;
            left: 40px;
            width: 120px;
            cursor: default;
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .3s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(-20px);
        opacity: 0;
    }
</style>
